import React from 'react'
import { AtDivider } from "taro-ui"
import {DoctorItemPlus} from './DoctorItemPlus'
import {TipsDivider} from '../common/TipsDivider'
import {Nothing} from '../common/Nothing'
import { View } from '@tarojs/components'

class DoctorItems extends React.Component{

  constructor(){
    super(...arguments)
    this.state={
      allNum:this.props.data.length,
      showNum:10
    }
  }

  showMore = (num) =>{
    if (num<this.state.allNum-10) {
      this.setState({showNum:num+10})
    }else{
      this.setState({showNum:this.state.allNum})
    }
  }

  render(){
    // console.log(this.props);
    return(
      this.props.data==''?
      <Nothing/>
      :<View>
        {
          <View>
          {
            this.props.data.slice(0,this.state.showNum).map(
              (item) => {    
                return(
                  <DoctorItemPlus name={item.doctor_name} doctor_id={item.doctor_id}
                      name_level={item.name_level} introduction={item.introduction}
                      status={'a'} picture={item.picture}
                      order_count={item.order_count} satis_rate={item.satis_rate}>
                  </DoctorItemPlus>
                )
              }
            )
          }
          {
            this.state.allNum>this.state.showNum?
              <View onClick={this.showMore.bind(this,this.state.showNum)} className='divider'>
                <AtDivider content='点击查看更多' fontColor='#d7d7d7'/>
              </View>
            :<TipsDivider/>
          }
          </View>
        }
      </View>
    )
  }
}
  
export {DoctorItems}